<template>
	<view class="addStaff-container">
		<!-- 自定义导航栏 -->
		<u-navbar title="新增员工" :border-bottom="false" title-size="28" title-color="#333" :background="{ background: 'transparent' }"></u-navbar>

		<view class="form-box">
			<view class="form-item">
				<view class="label">姓名</view>
				<view class="value-box">
					<text class="value">{{ pageForm.name }}</text>
				</view>
			</view>
			<view class="form-item">
				<view class="label">手机号</view>
				<view class="value-box">
					<input v-model="pageForm.phone" placeholder="请输入手机号" type="number" maxlength="11" placeholder-class="place-holder" class="positionInput" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">选择岗位</view>
				<view @click="openPositionPicker" class="value-box">
					<text v-if="!pageForm.position" class="fakePlaceholder">请选择岗位</text>
					<text v-else class="value">{{ positionList.find(i => i.value == pageForm.position).name }}</text>
					<image src="@/static/go-icon2.png" class="goIcon"></image>
				</view>
			</view>
			<view v-if="pageForm.position === '0'" class="form-item">
				<view class="label">选择区域</view>
				<view @click="openAreaPicker" class="value-box">
					<text v-if="!pageForm.area" class="fakePlaceholder">请选择区域</text>
					<text v-else class="value">{{ pageForm.area }}</text>
					<image src="@/static/go-icon2.png" class="goIcon"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">选择业务经理</view>
				<view @click="toChooseManager" class="value-box">
					<text v-if="!pageForm.manager" class="fakePlaceholder">请选择业务经理</text>
					<text v-else class="value">{{ pageForm.manager }}</text>
					<image src="@/static/go-icon2.png" class="goIcon"></image>
				</view>
			</view>

			<!-- 保存按钮 -->
			<view class="save-btn-box">
				<view class="save-btn">确认</view>
			</view>
		</view>
	</view>

	<!-- 岗位选择picker -->
	<cdsPicker v-model="positionPickerShow" @confirm="positionPickerConfirm" title="选择岗位" :showClose="false">
		<template v-slot:body>
			<view class="position-list">
				<view @click="choosePosition(item, index)" v-for="(item, index) in positionList" :key="index" class="position-item">
					<view class="position-title">
						<view class="title-text">{{ item.name }}</view>
						<view class="position-checkBox">
							<image v-if="item.value == pageForm.position" class="Checked icon" src="@/static/addStore/checked.png" alt="" />
							<image v-else class="noCheck icon" src="@/static/addStore/noCheck.png" alt="" />
						</view>
					</view>
				</view>
			</view>
		</template>
	</cdsPicker>
	
	<!-- 区域选择picker -->
	<u-picker v-model="areaPickerShow" @confirm="areaPickerConfirm" mode="region" borderRadius="32" cancel-color="#999" :safe-area-inset-bottom="true" confirm-color="#00C582"></u-picker>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import cdsPicker from '@/subPages/components/cds-picker/index.vue';

// 获取选择的员工数据
uni.$on('chooseStaff', (e) => {
	console.log('选择的员工', e);
	pageForm.value.manager = e;
})

// 页面表单绑定的数据
const pageForm = ref({
	name: '啦啦啦',
	phone: '',
	position: '',
	area: '',
	manager: ''
});

// 岗位列表
const positionList = ref([
	{
		name: '业务员',
		value: '0'
	},
	{
		name: '巡检员',
		value: '1'
	},
	{
		name: '业务经理',
		value: '2'
	}
]);

// 打开岗位选择弹窗
const positionPickerShow = ref(false);
const openPositionPicker = () => {
	positionPickerShow.value = true;
};

// 岗位选择
const choosePosition = (item, index) => {
	pageForm.value.position = item.value;
};

// 岗位弹窗确认
const positionPickerConfirm = () => {
	positionPickerShow.value = false;
};

// 打开选择区域picker
const areaPickerShow = ref(false);
const openAreaPicker = () => {
	areaPickerShow.value = true;
};

// 区域选择确认
const areaPickerConfirm = (area) => {
	console.log(area);
	pageForm.value.area = area.province.name + area.city.name + area.area.name;
};

// 跳转到选择业务经理页面
const toChooseManager = () => {
	uni.navigateTo({
		url: '/subPages/chooseManager/index'
	});
};
</script>

<style lang="scss" scoped>
.addStaff-container {
	height: 100vh;
	background-image: url('~@/static/addStaff/page-bg.png');
	background-size: 100% 1050rpx;
	background-repeat: no-repeat;

	.form-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 726rpx;
		padding: 48rpx 40rpx 0;
		border-radius: 48rpx 48rpx 0 0;
		background-color: #fff;

		.form-item {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			height: 104rpx;
			border-bottom: 2rpx solid #f0f0f0;

			.label {
				white-space: nowrap;
				min-width: 6em;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
			}

			.value-box {
				display: flex;
				gap: 14rpx;
				flex-wrap: nowrap;
				align-items: center;

				.fakePlaceholder,
				.value {
					color: #ccc;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.value {
					color: #333;
				}

				.positionInput {
					text-align: right !important;
					font-size: 28rpx;
				}

				.goIcon {
					width: 10rpx;
					height: 16rpx;
				}

				.scanIcon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.save-btn-box {
			display: flex;
			justify-content: center;
			height: 190rpx;
			margin-top: 12px;

			.save-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 646rpx;
				height: 98rpx;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 96rpx;
				background-color: $uni-main-color;
			}
		}
	}
}

.position-list {
	width: 100%;
	height: 100%;
	padding: 0 52rpx;

	.position-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 132rpx;
		border-bottom: 2rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.position-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-text {
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				color: #333;
			}

			.position-checkBox {
				.icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
}

:deep(.place-holder) {
	color: #ccc !important;
	font-size: 28rpx;
}
</style>
